<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>External Header Sort</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:700px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>external column sort initialisation</li>
      </ul>
      <p>- uses the options hook of passing a function (rather than true/false/undefined) as the <code>enableColumnReorder</code> option. This function will
      be used to set up the column reordering.</p>
      <p>- the function prototype is: <code>function(grid, $headers, headerColumnWidthDiff, setColumns, setupColumnResize, columns, getColumnIndex, uid, trigger)</code></p>
     </td>
  </tr>
</table>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.12.4.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false},
    {id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven"}
  ];

    function setupColumnReorder(grid, $headers, headerColumnWidthDiff, setColumns, setupColumnResize, columns, getColumnIndex, uid, trigger) {
      $headers.filter(":ui-sortable").sortable("destroy");
      $headers.sortable({
        //cancel: '#' + uid + 'title',
        containment: "parent",
        distance: 3,
        axis: "x",
        cursor: "default",
        tolerance: "intersection",
        helper: "clone",
        placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
        start: function (e, ui) {
          ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
          $(ui.helper).addClass("slick-header-column-active");
        },
        beforeStop: function (e, ui) {
          $(ui.helper).removeClass("slick-header-column-active");
        },
        stop: function (e) {
          if (!grid.getEditorLock().commitCurrentEdit()) {
            $(this).sortable("cancel");
            return;
          }

          var reorderedIds = $headers.sortable("toArray");
          var reorderedColumns = [];
          for (var i = 0; i < reorderedIds.length; i++) {
            reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
          }
          setColumns(reorderedColumns);

          trigger(grid.onColumnsReordered, {grid: grid});
          e.stopPropagation();
          setupColumnResize();
        }
      });
    }

 
  var options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true,
    enableColumnReorder: setupColumnReorder
  };

  $(function () {
    for (var i = 0; i < 5; i++) {
      var d = (data[i] = {});

      d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;
      d["duration"] = "5 days";
      d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
      d["start"] = "01/01/2009";
      d["finish"] = "01/05/2009";
      d["effortDriven"] = (i % 5 == 0);
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>
